<template>
  <div class="playing-list" id="playing-song-list">
    <!-- top信息 -->
    <div class="top-nav">
      <TabBar :tabitems="tabitems" @changeTagbar="changeTagbar" />
    </div>
    <!-- 播放列表 -->
    <div class="play-list" v-if="activeItem == 0">
      <!-- 列表信息 -->
      <div class="hd">
        <h4>共{{playingList.length}}首</h4>
        <span><i class="iconfont icon-delete" @click="clearPlayingList">清空</i></span>
      </div>
      <!-- 歌曲列表 -->
      <div class="bd">
        <el-table :data="playingList" style="width: 100%" :show-header="false" size="mini" empty-text="暂无歌曲" @row-dblclick="playSongClick">
          <el-table-column width="50">
              <template slot-scope="{row,$index}">
                <span class="iconfont" :class="isPlaying ? 'icon-voice' : 'icon-jingyin_laba'" v-if="row.id == nowSongDetail.id"></span>
                <span v-else>{{$index + 1}}</span>
              </template>
          </el-table-column>
          <el-table-column prop="name" :show-overflow-tooltip="true" width="100">
          </el-table-column>
          <el-table-column prop="ar[0].name" :show-overflow-tooltip="true" width="80">
            <template slot-scope="{row}">
              <span class="sname">
                {{ row.ar[0].name }}
              </span>
			      </template>
          </el-table-column>
          <el-table-column prop="dt" >
            <template slot-scope="{row}">
                {{row.dt | formatDuration}}
            </template>
          </el-table-column>
          <el-table-column prop="address" width="60">
            <template slot-scope="{$index}">
                <span class="iconfont icon-guanbi" @click="deletePlayingSong($index)"></span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 历史列表 -->
   <div class="history-list" v-if="activeItem == 1">
      <!-- 列表信息 -->
      <div class="hd">
        <h4>共{{historyPlayList.length}}首</h4>
        <span><i class="iconfont icon-delete" @click="clearHistoryPlay">清空</i></span>
      </div>
      <!-- 歌曲列表 -->
      <div class="bd">
        <el-table :data="historyPlayList" style="width: 100%" :show-header="false" size="mini" empty-text="暂无歌曲" @row-dblclick="playHistorySong">
          <el-table-column width="50">
              <template slot-scope="{row,$index}">
                <span class="iconfont" :class="isPlaying ? 'icon-voice' : 'icon-jingyin_laba'" v-if="row.id == nowSongDetail.id"></span>
                <span v-else>{{$index + 1}}</span>
              </template>
          </el-table-column>
          <el-table-column prop="name" :show-overflow-tooltip="true" width="100">
          </el-table-column>
          <el-table-column prop="ar[0].name" :show-overflow-tooltip="true" width="80">
            <template slot-scope="{row}">
              <span class="sname">
                {{ row.ar[0].name }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="dt" >
            <template slot-scope="{row}">
                {{row.dt | formatDuration}}
            </template>
          </el-table-column>
          <el-table-column prop="address" width="60">
            <template slot-scope="{$index}">
                <span class="iconfont icon-guanbi" @click="deleteHistory($index)"></span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import TabBar from "@/components/common/TabBar";
import { mapState } from "vuex";
export default {
  components: { TabBar },
  props:['nowSongDetail'],
  data() {
    return {
      tabitems: [{ name: "播放列表" }, { name: "历史记录" }],
      activeItem: 0,
      
    };
  },
  mounted(){
    // 点击其他区域（不包括播放器的控制栏）关闭列表
    let playingList = document.querySelector("#playing-song-list");
    let footer = document.querySelector("#footer");
    document.addEventListener("mousedown", e =>{
      if (!playingList.contains(e.target) && !footer.contains(e.target)) {
					 this.$emit("closePlayList");
				}
    })
  },
  methods: {
    // tarbar 组件自定义事件的回调函数
    changeTagbar(index){
        this.activeItem = index;
    },
    // 双击播放列表某一行，获取歌曲的信息
    async playSongClick(song){
        // 根据歌曲的id判断歌曲是否可用
       try {
        let isCheck = await this.$API.playmusic.checkMusic(song.id);
        if(isCheck.success){
            // 根据歌曲的id,获取歌曲的详情
            let songMessage = await this.$API.playmusic.getSongUrl(song.id);
            if(songMessage.code == 200){
                // 将当前歌曲的url保存在仓库
                this.$store.dispatch('saveSongUrl',songMessage.data[0].url)
                // 更新歌曲的播放状态
                this.$store.dispatch('changePlayState',true)
                // 将当前歌曲的信息保存在仓库
                this.$store.dispatch('saveSongDetail',song)
            }
        }
       } catch (error) {
        this.$message({
          type:'error',
          message:'亲爱的,暂无版权'
        })
       }   
    },
    // 历史记录列表双击回调函数
    playHistorySong(song){
        // 调用歌曲播放函数
        this.playSongClick(song);
        // 将歌曲添加到播放列表
        this.$store.dispatch('addPlayinglist',song)
        
    },
    // 删除单个播放列表中的记录的回调
    deletePlayingSong(index){
        // 先判断当前删除的歌曲是不是当前播放的歌曲
        let deleteSong = this.playingList[index];
        if(this.nowSongDetail.id  == deleteSong.id){

           // 如果当前要删除的歌曲和正在播放的歌曲是同一首
          // 如果删除的是当前的正在播放的歌曲，应该根据播放类型播放下一首
            this.$emit('nextSong')

            // // 需要清空当前播放歌曲的url,
            // this.$store.dispatch('saveSongUrl','')
            // // 更改播放状态
            // this.$store.dispatch('changePlayState',false)
            // // 清除仓库当前播放歌曲信息
            // this.$store.dispatch('saveSongDetail',{})
            // // 清空本地当前播放歌曲的信息
            // this.removeItem('nowSongDetail')
            // // 清空当前播放的秒数
            // this.$store.dispatch('saveCurrentSeconds',0)
            
        }
        // 通知仓库更新歌曲列表
        this.$store.dispatch('deleteSong',index)

    },
    // 删除单个历史记录回调函数
    deleteHistory(index){
      // 删除单个历史
      this.$store.dispatch('deletehistorySong',index)
    },
    // 清除播放列表数据
    clearPlayingList(){
        this.$store.dispatch('clearPlayingList')
    },
    // 清除全部历史记录
    clearHistoryPlay(){
       this.$store.dispatch('clearHistoryPlay')
    }
  },
  computed:{
        ...mapState({
            // 获取播放列表
            playingList:(state)=>{
                return state.playmusic.playingList;
            },
            // 获取历史记录
            historyPlayList:(state) =>{
                return state.playmusic.historyPlay;
            },
            // 获取当前播放的状态
            isPlaying: (state) => {
              return state.playmusic.isPlaying;
            },
        })
  }
};
</script>
<style lang="less" scoped>
.playing-list {
  position: absolute;
  bottom: 70px;
  right: 0px;
  height: calc(100vh - 130px);
  background: #fff;
  border-left: solid 1px #ebebeb;
  box-shadow: -3px 0px 5px 0px #eee;
  .top-nav {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 24px;
    margin-top: 10px;
  }
  .hd {
    display: flex;
    margin: 10px 0px;
    justify-content: space-between;
    align-items: center;
    height: 24px;
    border-bottom: 1px solid #eee;
    h4 {
      padding-left: 10px;
    }
    span {
      padding-right: 10px;
      cursor: pointer;
    }
  }
  .play-list,.history-list{
        height: calc(100% - 75px);
        .bd{
            height: 100%;
            overflow-y: scroll;
            .sname{
                cursor: pointer;
                &:hover{
                    color: var(--themeColor);
                }
            }
            .icon-guanbi:hover {
              color: var(--themeColor);
              cursor: pointer;
		        }
            .icon-voice,.icon-jingyin_laba{
              color: var(--themeColor);
            }
        }
  }

}
</style>